<template>
    <div class="dialog" v-if="isShow" @click="cancelChoiceClick">
        <div class="main">
            <div class="main-tit">
                <text class="main-tit-txt font-msyhl">{{title}}</text>
            </div>

            <scroller :style="{height: scrollHeight}" show-scrollbar="false" class="scroll">
                <div class="item" v-for="(item, index) in itemList" @click="choiceClick(item)">
                    <text class="item-text font-msyhl">{{item}}</text>

                    <image v-if="item == checkedItem" resize="stretch" class="item-img checked-img" :src="checkedImg"></image>
                    <image v-else resize="stretch" class="item-img unChecked-img" :src="unCheckedImg"></image>
                </div>
            </scroller>
        </div>
    </div>
</template>
<style scoped>
    .dialog {
        position: fixed;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        background-color: transparent;
    }
    .main {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #fff;
    }
    .main-tit {
        height: 80px;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        border-bottom-width: 1px;
        border-color: #e6e6e6;
    }
    .main-tit-txt {
        font-size: 30px;
        color: #313131;
    }
    .scroll {
        width: 1080px;
    }
    .item {
        border-bottom-width: 1px;
        border-color: #e6e6e6;
        height: 80px;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding-left: 30px;
        padding-right: 30px;
    }
    .item-text {
        color: #313131;
        font-size: 30px;
    }
    .item-img {
        width: 35px;
        height: 35px;
    }
    .font-msyhl {
        font-family: msyhl;
    }
</style>
<script>

    import checkedImg from 'assets/images/checked-circle.png';
    import unCheckedImg from 'assets/images/unchecked-circle.png';

    export default{
        props: {
            isShow: {
                type: Boolean,
                default: false
            },
            itemList: {
                type: Array,
                required: true
            },
            title: {
                type: String,
                default: '标题'
            },
            scrollHeight: {
                type: Number,
                default: 480
            }
        },
        data(){
            return{
                checkedImg: checkedImg,
                unCheckedImg: unCheckedImg,
                checkedItem: "" //记录当前选中记录
            }
        },
        methods: {
            choiceClick(e) {
                this.$parent.isShow = false;
                this.checkedItem = e;
                this.$emit("choiceClick",e);
            },
            cancelChoiceClick(e){
                this.$parent.isShow = false;
            }
        }
    }
</script>
